<template>
    <div class="left">
        <el-menu default-active="1" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose">
            <el-sub-menu index="1">
                <template #title>
                    <el-icon>
                        <Grid />
                    </el-icon>
                    <span>首页</span>
                </template>
                <el-menu-item-group title="轮播图管理">
                    <router-link to="/carousel_add"
                        @click.prevent="handleMenuItemClick('/carousel_add', '1', '发布轮播图', 'carousel_add')">
                        <el-menu-item index="1-1">发布轮播图</el-menu-item>
                    </router-link>
                    <router-link to="/carousel_list"
                        @click.prevent="handleMenuItemClick('/carousel_list', '2', '轮播图列表', 'carousel_list')">
                        <el-menu-item index="1-2">轮播图列表</el-menu-item>
                    </router-link>
                </el-menu-item-group>
                <el-menu-item-group title="导航管理">
                    <router-link to="/nav_list"
                        @click.prevent="handleMenuItemClick('/nav_list', '3', '导航列表', 'nav_list')">
                        <el-menu-item index="1-3">导航列表</el-menu-item>
                    </router-link>
                    <router-link to="/nav_add"
                        @click.prevent="handleMenuItemClick('/nav_add', '4', '添加导航', 'nav_add')">
                        <el-menu-item index="1-4">添加导航</el-menu-item>
                    </router-link>
                </el-menu-item-group>
            </el-sub-menu>
            <el-sub-menu index="2">
                <template #title>
                    <el-icon><icon-menu /></el-icon>
                    <span>内容管理</span>
                </template>
                <el-menu-item-group>
                    <router-link to="/module_meg"
                        @click.prevent="handleMenuItemClick('/module_meg', '5', '板块管理', 'module_meg')">
                        <el-menu-item index="2-1">板块管理</el-menu-item>
                    </router-link>
                </el-menu-item-group>
            </el-sub-menu>
            <router-link to="/userMange"
                @click.prevent="handleMenuItemClick('/userMange', '6', '用户管理', 'userMange')">
                <el-menu-item index="3">
                    <el-icon>
                        <document />
                    </el-icon>
                    <span>用户管理</span>
                </el-menu-item>
            </router-link>
            <router-link to="/SystemView"
                @click.prevent="handleMenuItemClick('/SystemView', '7', '系统设置', 'SystemView')">
                <el-menu-item index="4">
                    <el-icon>
                        <setting />
                    </el-icon>
                    <span>系统设置</span>
                </el-menu-item>
            </router-link>
        </el-menu>
    </div>
    <div class="right">
        <div class="right_top_tab">
            <el-tabs v-model="editableTabsValue" type="card" class="demo-tabs" closable @tab-remove="removeTab"
                @tab-click="handleClick">
                <el-tab-pane v-for="item in editableTabs" :key="item.name" :label="item.title" :name="item.name">
                </el-tab-pane>
            </el-tabs>
        </div>
        <div class="right_body" v-if="mylogin">
            <router-view></router-view>
        </div>
    </div>
</template>

<script lang="ts" setup>
import { ref, watch } from 'vue'
import { useRouter, useRoute } from 'vue-router';
import {
    Document,
    Menu as IconMenu,
    Setting,
} from '@element-plus/icons-vue'

let mylogin: boolean;
if (localStorage.getItem('ISLOGIN')) {
    mylogin = true;
} else {
    mylogin = false;
}

const handleOpen = (key: string, keyPath: string[]) => {
    console.log(key, keyPath)
}
const handleClose = (key: string, keyPath: string[]) => {
    console.log(key, keyPath)
}

let tabIndex = 7
const editableTabsValue = ref('1')
const editableTabs = ref([
    {
        title: '发布轮播图',
        name: '1',
        content: '/carousel_add',
    },
    {
        title: '轮播图列表',
        name: '2',
        content: '/carousel_list',
    },
    {
        title: '导航列表',
        name: '3',
        content: '/nav_list',
    },
    {
        title: '添加导航',
        name: '4',
        content: '/nav_add',
    },
    {
        title: '板块管理',
        name: '5',
        content: '/module_meg',
    },
    {
        title: '用户管理',
        name: '6',
        content: '/userMange',
    },
    {
        title: '系统设置',
        name: '7',
        content: '/SystemView',
    }
])

const router = useRouter()
const route = useRoute()

const handleClick = (tab: any, event: Event) => {
    const tabName = tab.props.name;
    const selectedTab = editableTabs.value.find(t => t.name === tabName);
    if (selectedTab) {
        router.push(selectedTab.content);
    }
};

watch(() => route.path, (newPath) => {
    updateActiveTab();
});

const updateActiveTab = () => {
    console.log("执行更新激活标签页的函数");
    const currentRoute = route.path;
    const mainPath = currentRoute.split('/')[1];
    const tab = editableTabs.value.find(t => t.content === `/${mainPath}`);
    console.log("tab", tab);
    if (tab) {
        editableTabsValue.value = tab.name;
    } else if (editableTabs.value.length > 0) {
        const firstTab = editableTabs.value[0];
        editableTabsValue.value = firstTab.name;
    }
};

const addTab = (tabName: string, tabTitle: string, tabContent: string) => {
    const existingTab = editableTabs.value.find(t => t.name == tabName);
    if (!existingTab) {
        const newTabName = tabName;
        editableTabs.value.push({
            title: tabTitle,
            name: newTabName,
            content: '/'+tabContent,
        });
        editableTabsValue.value = newTabName;
    }
    console.log("editableTabs",editableTabs);
};

const handleMenuItemClick = (route: string, tabName: string, tabTitle: string, tabContent: string) => {
    addTab(tabName, tabTitle, tabContent);
    router.push(route)
}

const removeTab = (targetName: string) => {
    const tabs = editableTabs.value;
    let activeName = editableTabsValue.value;
    if (activeName === targetName) {
        tabs.forEach((tab, index) => {
            if (tab.name === targetName) {
                const nextTab = tabs[index + 1] || tabs[index - 1];
                if (nextTab) {
                    activeName = nextTab.name;
                }
            }
        });
    }
    editableTabsValue.value = activeName;
    updateActiveTab(); // 确保更新激活的 Tab
    editableTabs.value = tabs.filter((tab) => tab.name !== targetName);
    const nextRoute = activeName ? editableTabs.value.find(t => t.name === activeName)?.content : '/';
    console.log("editableTabs",editableTabs);
    router.push(nextRoute || '/');
};
</script>

<style lang="scss" scoped>
@use "../common/scss/variable.scss";

.left {
    width: 16vw;
    height: 92vh;
    background-color: rgb(251, 251, 251);
    min-width: 200px;

    .el-menu,
    .el-menu--vertical,
    .el-menu-vertical-demo {
        width: 14vw;
        height: 80vh;
        box-shadow:variable.$shadowColor 3px 10px 10px 0px;
        min-width: 150px;
    }

    .el-menu-item.is-active {
        color: variable.$activeColor;
    }
}

.right {
    width: 84vw;
    height: 92vh;
    background-color: variable.$leftColor;
    min-width: 800px;

    .right_top_tab {
        width: 76vw;
        height: 6vh;
        margin: 0 auto;
        margin-top: 4vh;
        background-color: rgb(250, 250, 250);

        ul {
            margin: 0;
            padding: 0;
            height: 6vh;
            clear: both;
            min-width: 800px;
            white-space: nowrap;

            li {
                display: inline-block;
                height: 6vh;
                padding: 0;
                width: 7vw;
                height: 6vh;
                background-color: rgb(255, 255, 255);
                text-align: center;
                margin-right: .4vw;
                min-width: 90px;

                span {
                    line-height: 6vh;
                }

                img {
                    position: relative;
                    top: -2vh;
                    left: 0.5vw;
                    width: 1vw;
                    cursor: pointer;
                }

                img:hover {
                    background-color: rgb(255, 185, 185);
                }
            }

            .del_all_btn {
                display: inline-block;
                position: absolute;
                right: 5vw;
                background-color: rgb(255, 255, 255);
                border: rgb(213, 213, 213) solid 1px;
                color: #949494;
                cursor: pointer;
            }
        }
    }

    .right_body {
        width: 76vw;
        margin: 0 auto;
        height: 78vh;
        margin-top: 4vh;
        min-width: 800px;

        ul {
            margin: 0;
            padding: 0;

            li {
                width: 76vw;
                height: 78vh;
                margin: 0 auto;
            }

            .active_body {
                display: block;
            }
        }
    }
}
</style>

<style>
.demo-tabs>.el-tabs__content {
    padding: 32px;
    color: #6b778c;
    font-size: 32px;
    font-weight: 600;
}
</style>